<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="${ctx}/statics/css/integrate.css?v=${v}">
    <title>综合</title>
</head>
<body>
<section class="printBox">
    <!--今日展示-->
    <section class="top layui-row layui-col-space10">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <fieldset>
                <legend>今日用<em class="typeName">水</em>概况</legend>
                <div class="water-wrap layui-hide">
                    <svg class="wave-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">
                        <defs>
                            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
                        </defs>;
                        <g class="parallax">
                            <use xlink:href="#gentle-wave" x="50" y="0" fill="rgba(0,149,227,.6)"></use>
                            <use xlink:href="#gentle-wave" x="50" y="3" fill="rgba(0,149,227,.4)"></use>
                            <use xlink:href="#gentle-wave" x="50" y="6" fill="rgba(0,149,227,.2)"></use>
                        </g>
                    </svg>
                </div>
                <div id="electronic-animate" class="layui-hide">
                    <div id="mask">
                        <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 77H234.226L307.006 24H790" stroke="rgba(0,238,255,.6)" stroke-width="8" />
                            <path d="M0 140H233.035L329.72 71H1028" stroke="rgba(0,238,255,.6)" stroke-width="8" />
                            <path d="M1 255H234.226L307.006 307H790" stroke="rgba(0,238,255,.6)" stroke-width="8" />
                            <path d="M0 305H233.035L329.72 375H1028" stroke="rgba(0,238,255,.6)" stroke-width="8" />
                            <rect y="190" width="280" height="8" fill="rgba(0,238,255,.6)" />
                            <circle r="18" transform="matrix(1 0 0 -1 790 25)" fill="rgba(0,238,255,.6)" />
                            <circle r="10" transform="matrix(1 0 0 -1 790 25)" fill="white" />
                            <circle r="18" transform="matrix(1 0 0 -1 790 308)" fill="rgba(0,238,255,.6)" />
                            <circle r="10" transform="matrix(1 0 0 -1 790 308)" fill="white" />
                        </svg>
                    </div>
                    <div id="orange-mask" >
                        <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 77H234.226L307.006 24H790" stroke="yellow" stroke-width="8" />
                            <path d="M0 140H233.035L329.72 71H1028" stroke="yellow" stroke-width="8" />
                            <path d="M1 255H234.226L307.006 307H790" stroke="yellow" stroke-width="8" />
                            <path d="M0 305H233.035L329.72 375H1028" stroke="yellow" stroke-width="8" />
                            <rect y="190" width="280" height="8" fill="yellow" />
                            <circle r="18" transform="matrix(1 0 0 -1 790 25)" fill="yellow" />
                            <circle r="10" transform="matrix(1 0 0 -1 790 25)" fill="yellow" />
                            <circle r="18" transform="matrix(1 0 0 -1 790 308)" fill="yellow" />
                            <circle r="10" transform="matrix(1 0 0 -1 790 308)" fill="yellow" />
                        </svg>
                    </div>
                </div>
                <div class="water-count">
                    <div>超标个数 / 总个数</div>
                    <div><span class="fontRed font32 overCnt"></span> 台 / <span class="font18 totalCnt"></span> 台</div>
                    <div>实际用量 / 日累计标准量 / 节约率</div>
                    <div><span class="font32 currentWater"></span> <span class="unit">T</span> / <span class="font18 standardWater"></span> <span class="unit">T</span> / <span class="font18 rateCnt"></span></div>
                </div>
                <div class="layui-form-item devTypeCode-select">
                    <button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-fluid meter-btn water-btn" deviceTypeCode="1">水表</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-fluid meter-btn electronic-btn" deviceTypeCode="0">电表</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-fluid gas-btn">气表</button>
                </div>
            </fieldset>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
            <fieldset>
                <legend>综合能耗</legend>
                <div class="type-wrap-box">
                    <div class="type-wrap layui-col-md12 water-info">
                        <div class="icon-img shui icon-active">
                            <i class="iconfont icon-shui"></i>
                         </div>
                        <em class="use-count-wrap">
                            <div>
                                <div>
                                    <div>本月累计用水</div>
                                    <div><span class="avgCnt"></span> T</div>
                                </div>
                                <div>
                                    <div>月累计节约率</div>
                                    <div><span class="month-rateCnt-water fontGreen"></span></div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <div>月累计标准量</div>
                                    <div><span class="month-standard-water"></span> T</div>
                                </div>
                                <div>
                                    <div>月总标准量</div>
                                    <div><span class="month-standard-water1"></span> T</div>
                                </div>
                            </div>
                        </em>
                    </div>
                    <div class="type-wrap layui-col-md12 electric-info">
                        <div class="icon-img dian icon-active">
                            <i class="iconfont icon-dian"></i>
                        </div>
                        <em  class="use-count-wrap">
                            <div>
                                <div>
                                    <div>本月累计用电</div>
                                    <div><span class="avgCnt1"></span> kW·h</div>
                                </div>
                                <div>
                                    <div>月累计节约率</div>
                                    <div><span class="month-rateCnt-electric fontGreen"></span></div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <div>月累计标准量</div>
                                    <div><span class="month-standard-electric"></span> kW·h</div>
                                </div>
                                <div>
                                    <div>月总标准量</div>
                                    <div><span class="month-standard-electric1"></span> kW·h</div>
                                </div>
                            </div>
                        </em>
                    </div>
                </div>
            </fieldset>
        </div>
    </section>
    <button class="layui-btn layui-btn-primary layui-btn-sm pdfBtn">导出PDF</button>
    <!--图表集合-->
    <section class="charts clearfix">
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="boxOne">
                    <div class="sel">
                        <span class="sel-title">本月设备累计用量</span>
                        <select name="areaId" id="areaSel" xm-select="areaMenu" class="multi-area areaMenu" xm-select-skin="default" xm-select-height="26px" xm-select-show-count="1"></select>
                    </div>
                    <div id="grandTotalBox"></div>
                </div>
            </div>
            <div class="layui-col-md6 clearfix grand-total">
                <div class="boxwrap clearfix">
                    <div class="fl w50" id="overCntPieChart"></div>
                    <div class="fl list w50">
                        <h4>本月总量超标<em class="typeName">水</em>表</h4>
                        <table class="layui-table" lay-filter="overTable" id="overTable" lay-skin="nob">
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md6"><div id="monthDaysTrend"></div></div>
            <div class="layui-col-md6"><div id="monthTotal"></div></div>
        </div>
    </section>
</section>

<script src="${ctx}/statics/libs/echarts/echarts.min.js?v=${v}"></script>
<script src="${ctx}/statics/libs/echarts/echarts-gl.min.js?v=${v}"></script>
<script src="${ctx}/statics/libs/echarts/darkTheme.js?v=${v}"></script>
<!-- 导出功能核心js -->
<script src="${ctx}/statics/libs/toPDF/jspdf.debug.js"></script>
<script src="${ctx}/statics/libs/toPDF/html2canvas.js"></script>
<script src="${ctx}/statics/js/integrate.js?v=${v}"></script>
</body>
</html>
